<template>
  <div>
    <h3>{{ chineseName }}({{ id }})</h3>
    <p>{{ content }}</p>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { useRoute } from "vue-router";
import { watch } from "vue";

let chineseName = ref("");
let content = ref("");
const props = defineProps({
  id: String,
});

const route = useRoute();
watch(
  () => route.path,
  (path) => {
    // 去除 /about/ 前缀
    const pathWithoutPrefix = path.replace("/about/", "");
    // 更新 chineseName
    if (pathWithoutPrefix === "NestedRoutes") {
      chineseName.value = "嵌套路由";
      content.value = "嵌套路由的详细信息";
    } else if (pathWithoutPrefix === "DynamicRouting") {
      chineseName.value = "动态路由";
      content.value = "动态路由的详细信息";
    } else {
      chineseName.value = "未知";
    }
  },
  { immediate: true }
); // 立即执行一次监听器
</script>